<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="lay">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="form">

      <el-form-item label="流程名称" prop="procName">
        <el-input v-model="ruleForm.procName"    @change="handlerProc"></el-input>
      </el-form-item>

      <el-form-item label="流程KEY" prop="procKey">
        <el-input v-model="ruleForm.procKey"></el-input>
      </el-form-item>
<!--      <el-form-item label="所在部门" prop="orgInfo">-->
<!--        <universal-selector-->
<!--          v-model="ruleForm.orgInfo"-->
<!--          type="organ"-->
<!--          :max="1"-->
<!--        ></universal-selector>-->
<!--      </el-form-item>-->


      <el-form-item label="表单" prop="formId">
        <el-select v-model="ruleForm.formId" filterable placeholder="请选择">
          <el-option
                  v-for="item in formsList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="分组" prop="groupTag">
        <el-input v-model="ruleForm.groupTag"></el-input>
      </el-form-item>


      <el-form-item label="流程说明" prop="remark">
        <el-input v-model="ruleForm.remark" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="完成消息">
        <el-checkbox v-model="ruleForm.completeToNotify" true-label="true" false-label="false" label="是否发送" />
        <el-input
          v-if="ruleForm.completeToNotify === 'true'"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="ruleForm.completeMsgTemp"
        ></el-input>
      </el-form-item>
      <el-form-item label="拒绝消息">
        <el-checkbox v-model="ruleForm.rejectToNotify" true-label="true" false-label="false" label="是否发送" />
        <el-input
          v-if="ruleForm.rejectToNotify === 'true'"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="ruleForm.rejectMsgTemp"
        ></el-input>
      </el-form-item>
      <el-form-item label="退回消息">
        <el-checkbox v-model="ruleForm.returnToNotify" true-label="true" false-label="false" label="是否发送" />
        <el-input
          v-if="ruleForm.returnToNotify === 'true'"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="ruleForm.returnMsgTemp"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>-->
    </el-form>
  </div>
</template>

<script>
import _ from 'lodash'
import { template } from '@/framework-code/utils/constants'
import { listForm } from '@/framework-code/api/middle'
import pinyin from 'js-pinyin'

export default {
  props: {
    mData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: false,
      formsList:[],
      aotuChange:false,
      ruleForm: {
        procKey: '',
        procName: '',
        remark: '',

        completeMsgTemp: '',
        completeToNotify: 'false',
        rejectMsgTemp: '',
        rejectToNotify: 'false',
        returnMsgTemp: '',
        returnToNotify: 'false',
        orgId: null,
        orgInfo: null
      },
      rules: {
        procKey: [{ required: true, message: '请输入流程KEY', trigger: 'blur' }],
        procName: [{ required: true, message: '请输入流程名称', trigger: 'blur' }]
      }
    }
  },
  watch: {
    mData(val, oldVal) {
      if (val !== null && oldVal === null) {
        const { wfSimpleProc } = val
        if (wfSimpleProc?.orgInfo) {
          wfSimpleProc.orgInfo = JSON.parse(wfSimpleProc.orgInfo)
        }

        if (wfSimpleProc) {
          this.ruleForm = wfSimpleProc
        }

        if (!wfSimpleProc?.completeMsgTemp) {
          this.ruleForm.completeMsgTemp = template.complete
        }

        if (!wfSimpleProc?.rejectMsgTemp) {
          this.ruleForm.rejectMsgTemp = template.reject
        }

        if (!wfSimpleProc?.returnMsgTemp) {
          this.ruleForm.returnMsgTemp = template.return
        }
      }
    },
    ruleForm: {
      handler(val) {
        this.$emit('on-mode', 'wfSimpleProc', val)
      },
      deep: true
    }
  },
  mounted() {
    this.getListForm();
    this.aotuChange = !this.ruleForm.procKey;
    if (this.mData?.wfSimpleProc) {
      if(this.mData.wfSimpleProc.orgInfo && typeof this.mData.wfSimpleProc.orgInfo === 'string'){
        this.mData.wfSimpleProc.orgInfo = JSON.parse(this.mData.wfSimpleProc.orgInfo)
      }
      this.ruleForm = this.mData.wfSimpleProc

    }
  },
  methods: {
    getListForm(){
      let $that =this;
      listForm().then((res) => {
        // $that.formsList = [];
         $that.formsList = res.data.data.data;
      }).catch(() => {

      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.$refs[formName].model)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handlerProc(){
      if(!this.aotuChange){
        return
      }
      if(!this.ruleForm.procName){
        return
      }

      this.ruleForm.procKey = pinyin.getCamelChars(this.ruleForm.procName).trim();

    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.lay {
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding-top: 30px;
}

.form {
  width: 460px;
}

.select {
  border-radius: 5px;
  border: 1px solid #dcdfe6;
  padding: 4px;

  .el-tag {
    margin-left: 10px;
  }

  .new-tag {
    margin-left: 10px;
  }
}
</style>
